<template>
  <div class="carousel-container">
    <div class="carousel" ref="carousel">
      <div class="carousel-track" ref="carouselTrack" :style="trackStyle" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
        <div 
          v-for="(slide, index) in slides" 
          :key="index" 
          class="carousel-slide"
          :class="{ active: currentSlide === index }"
        >
          <div class="slide-content" :style="{ backgroundImage: `url(${slide.image})` }">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  slides: {
    type: Array,
    required: true,
    default: () => []
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 5000
  }
})

const currentSlide = ref(0)
const carouselTrack = ref(null)
const carousel = ref(null)
let autoplayTimer = null

// 触摸滑动相关数据
const touchStartX = ref(0)
const touchEndX = ref(0)
const touchThreshold = 50 // 滑动阈值

const trackStyle = computed(() => ({
  transform: `translateX(-${currentSlide.value * 100}%)`
}))

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % props.slides.length
}

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + props.slides.length) % props.slides.length
}

// 触摸事件处理
const handleTouchStart = (e) => {
  touchStartX.value = e.changedTouches[0].screenX
  // 停止自动播放
  if (autoplayTimer) {
    clearInterval(autoplayTimer)
    autoplayTimer = null
  }
}

const handleTouchMove = (e) => {
  // 阻止默认行为，防止页面滚动
  e.preventDefault()
}

const handleTouchEnd = (e) => {
  touchEndX.value = e.changedTouches[0].screenX
  handleSwipe()
  // 重新启动自动播放
  if (props.autoplay) {
    startAutoplay()
  }
}

// 处理滑动
const handleSwipe = () => {
  const diff = touchStartX.value - touchEndX.value
  if (Math.abs(diff) > touchThreshold) {
    if (diff > 0) {
      // 向左滑动，显示下一张
      nextSlide()
    } else {
      // 向右滑动，显示上一张
      prevSlide()
    }
  }
}

const startAutoplay = () => {
  if (props.autoplay && props.slides.length > 1) {
    autoplayTimer = setInterval(nextSlide, props.interval)
  }
}

const stopAutoplay = () => {
  if (autoplayTimer) {
    clearInterval(autoplayTimer)
    autoplayTimer = null
  }
}

onMounted(() => {
  startAutoplay()
})

onBeforeUnmount(() => {
  stopAutoplay()
})
</script>

<style scoped>
.carousel-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 40px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  touch-action: pan-y; /* 允许垂直方向的触摸操作，禁用水平方向的默认行为 */
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform; /* 优化性能 */
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.slide-content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .carousel {
    height: 250px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .carousel {
    height: 200px;
  }
}
</style>